<script setup lang="ts">
interface Props {
  id: string
  title: string
}
defineProps<Props>()
</script>

<template>
  <a-card class="main-content-box" :id="id" hoverable>
    <template #title>
      <div>{{ title }}</div>
    </template>
    <slot />
  </a-card>
</template>

<style lang="scss" scoped>
.main-content-box {
  border: none;
  border-radius: 0.5rem;
  :deep(.ant-card-head) {
    min-height: 28px;
    padding: 0 12px;
    &:hover {
      cursor: pointer;
    }
  }
  :deep(.ant-card-head-title) {
    padding: 8px 0;
  }
  :deep(.ant-card-body) {
    padding: 12px;
    cursor: default;
  }
}
</style>
